<template>
  <div class="all_activity_detail">
    <Header-Comp :title="detailData.actTitle" :isBackApp="isBackApp" />
    <div class="content">
      <img :src="detailData.actPath" class="banner" />
      <div class="add_now" @click="nowAdd">立即参与</div>
      <div class="activity_weal">
        <div class="weal_title">
          <div class="left_colour"></div>
          <span>活动权益</span>
        </div>
        <div class="activity_about">
          <div class="activity_about_item">
            <div class="left">活动状态：</div>
            <div class="right">{{ detailData.timeStatus | timeStr }}</div>
          </div>
          <div class="activity_about_item">
            <div class="left">活动时间：</div>
            <div class="right">{{ detailData.activityTime }}</div>
          </div>
          <div class="activity_about_item">
            <div class="left">活动介绍：</div>
            <div class="right">
              {{ detailData.actMsg }}
            </div>
          </div>
        </div>
        <img :src="detailData.infoPath" class="long_img" />
      </div>
    </div>
    <van-action-sheet v-model="show">
      <div class="steps">
        <div class="step" v-for="(item, i) in list" :key="i" @click="stepsChange(i)">
          <!-- 左侧 -->
          <!-- <div class="step_left">{{ item.time }}</div> -->
          <!-- 中部 -->
          <div class="step_mid">
            <div
              class="step_dot"
              :style="{ backgroundColor: stepIndex >= i ? '#FFB72F' : '#E4E4E4' }"
            >
              {{  i + 1 }}
            </div>
            <template v-if="i < list.length - 1">
              <div
                class="step_line"
                :style="{ backgroundColor: stepIndex >= i ? '#FFB72F' : '#E4E4E4' }"
              ></div>
            </template>
          </div>
          <!-- 右侧 -->
          <div class="step_right">
            <div class="left">
              <div class="step_name">{{ item.name }}</div>
              <div class="step_idea">{{item.msg}}</div>
            </div>
            
            <img class="forward" src="../../../assets/img/forward.png">
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { bankActManage, qryApplyBoolean, cardApply } from "@/api/agent";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      detailData: {},
      show: false,
      isShowActivate: null,
      bankApplyUrl: '',
      applyStatus: '',
      applyFlag: '',
      isBackApp: false,
      list: [ 
        { time: '2021-5-13 12:56:15', name: '立即开卡', msg: '点击进入平安银行开卡链接。' }, 
        { time: '2021-5-14 12:56:15', name: '预约激活', msg: '点击进入平安银行卡激活链接， 预约成功后，请耐心等候工作人员联系。' }, 
        { time: '2021-5-15 12:56:15', name: '更换结算卡', msg: '银行卡激活成功后，更换结算卡，即可完成 活动参与流程啦！' }, 
      ]
    };
  },
  filters: {
    timeStr(num) {
      let mapSource = {
        0: "未开始",
        1: "进行中",
        2: "已结束",
      };
      return mapSource[num];
    },
  },
  computed: {
    ...mapGetters(['stepIndex'])
  },
  async mounted() {
    await this.getDetail();
    if(this.$route?.query?.token) {
      this.$store.dispatch('SET_STEP_INDEX', 0)
      this.bankApplyUrl = localStorage.setItem('bankApplyUrl', '')
      this.isBackApp = true
    } else {
      this.isBackApp = false
    }
    this.bankApplyUrl = localStorage.getItem('bankApplyUrl')
    if(this.bankApplyUrl) {
      this.nowAdd()
      this.show = true
    }
    
    // this.qryApplyBoolean()
  },
  methods: {
    stepsChange(i) {
      const { userId, type } = this.$route.query
      const { deptId } = this.detailData
      const { applyStatus, applyFlag } = this
      switch(i) {
        case 0:
          if(applyFlag === 'R' && applyStatus !== 'W') return this.$notify({ type: 'primary', message: ('请勿重复报名') })
          if(!this.bankApplyUrl) return
          window.location.href = this.bankApplyUrl
        break
        case 1: 
          if(this.stepIndex < 1) return 
          if(applyFlag === 'R' && applyStatus !== 'Q') return this.$notify({ type: 'primary', message: ('请勿重复报名') })
          this.cardApply() 
        break;
        case 2: 
          if(this.stepIndex < 2) return
          this.$router.push({name: 'settleinfo', query: { id: userId, deptId, isBack: 1, type}})
        break
      }
    },
    nowAdd() {
      localStorage.setItem('bankApplyUrl', '')
      this.$store.dispatch('SET_STEP_INDEX', 0)
      this.bankApplyUrl = ''
      const { id: actId, storeId } = this.$route.query
      const { deptId } = this.detailData
      cardApply({actId, storeId, urlType: 'O', deptId }).then(async res => {
        const { applyFlag, applyStatus } = res.data.data
        const { code, msg } = res.data
        this.applyFlag = applyFlag
        this.applyStatus = applyStatus
        if(code !== 200 || applyFlag === "F") return this.$notify({ type: 'primary', message: (applyFlag === "F" ? "报名失败" : msg) });
        if(applyFlag === 'R') {
          switch (applyStatus) {
            case 'J': 
              this.$store.dispatch('SET_STEP_INDEX', 2)
              this.show = true
            break;
            case 'W': 
              if(res.data.data.bankApplyUrl) this.bankApplyUrl = res.data.data.bankApplyUrl
              this.show = true
            break;
            case 'Q':
              this.$store.dispatch('SET_STEP_INDEX', 1) 
              this.show = true
            break;
            case 'F': 
              this.$notify({ type: 'primary', message: ('无效报名') })
            break;
            default: 
              this.$notify({ type: 'primary', message: ('请勿重复报名') })
            break;
          }
          return
        }

        if(applyFlag === 'S' && res.data.data.bankApplyUrl) {
          localStorage.setItem('bankApplyUrl', res.data.data.bankApplyUrl)
          this.bankApplyUrl = res.data.data.bankApplyUrl
          this.show = true
          await this.qryApplyBoolean()
          if(this.isShowActivate) {
            this.$store.dispatch('SET_STEP_INDEX', 1) 
          }
        } else {
           this.$notify({ type: 'success', message: '报名成功' });
        }
      })
    },
    //预约申请
    cardApply() {
      const { id: actId, storeId } = this.$route.query
      const { deptId } = this.detailData
      cardApply({actId, storeId, urlType: 'A', deptId }).then(res => {
        window.location.href = res.data.data.bankApplyUrl
      })
    },
    getDetail() {
      return bankActManage(this.$route.query).then((res) => {
        const { data } = res
          let nowTime = new Date().getTime()
          let start = new Date(data.data.actStartTime.replace(/-/g,'/'))
          let end = new Date(data.data.actEndTime.replace(/-/g,'/'))
          let startTime = start.getTime()
          let endTime = end.getTime()
          let startStr = `${start.getFullYear()}年${start.getMonth() + 1}月${start.getDate()}日`
          let endStr = `${end.getFullYear()}年${end.getMonth() + 1}月${end.getDate()}日`
          let mergeStr = startStr + '-' + endStr
          data.data.activityTime = mergeStr
          let timeStatus = startTime > nowTime ? 0 : (startTime < nowTime && endTime > nowTime ? 1 : 2)
          data.data.timeStatus = timeStatus
          this.detailData = data.data
          return data.data
      });
    },
    qryApplyBoolean() {
      const { id: actId, storeId } = this.$route.query
      return qryApplyBoolean({actId, storeId}).then(res => {
        this.isShowActivate = res.data.data
        return ''
      })
    }
  },
};
</script>



<style lang="less" scoped>
.all_activity_detail {
  height: 100%;
  background: #f9f9f9;
  box-sizing: border-box;
  .content {
    padding: 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .banner {
      width: 100%;
      height: 240px;
      border-radius: 6px;
    }
    .add_now {
      line-height: 80px;
      text-align: center;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-top: 40px;
      width: 400px;
      height: 80px;
      background: #ffb72f;
      border-radius: 12px;
    }
    .activity_weal {
      margin-top: 52px;
      width: 100%;
      .weal_title {
        display: flex;
        .left_colour {
          width: 6px;
          height: 32px;
          background: #ffb72f;
          margin-right: 11px;
        }
        font-size: 30px;
        line-height: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
      }
      .activity_about {
        padding: 40px 30px;
        margin-top: 28px;
        background: #ffffff;
        border-radius: 12px;

        .activity_about_item {
          &.activity_about_item:first-child {
            margin-top: 0;
          }
          margin-top: 35px;
          display: flex;
          .left {
            white-space: normal;

            font-size: 28px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #131313;
          }
          .right {
            font-size: 28px;
            font-family: PingFang SC;
            color: #131313;
            width: 480px;
          }
        }
      }
    }
    .long_img {
      margin-top: 30px;
      width: 100%;
    }
  }
  .steps {
    margin-top: 50px;
	.step {
		display: flex;
		.step_left {
			width: 140px;
			margin-top: -14px;
			font-size: 26px;
			line-height: 36px;
			text-align: right;
		}
		.step_mid {
			width: 50px;
			display: flex;
			flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
			margin: 0 25px;
			.step_dot {
				width: 40px;
				height: 40px;
				background: #dcdcdc;
				border: 5px solid #f5f5f5;
				border-radius: 50%;
				color: #ffffff;
				font-size: 28px;
				text-align: center;
				line-height: 40px;
			}
			.active_dot {
				background: #2a62ed;
				border: 5px solid #e3ebff;
			}
			.step_line {
				width: 4px;
				height: 160px;
				// background-color: #eeeeee;
			}
			.active_line {
				background: #2a62ed;
			}
		}
		.step_right {
			width: 100%;
			height: fit-content;
			padding: 25px 30px;
			margin-top: -14px;
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
      justify-content: space-between;
      align-items: center;
      .forward {
        height: 30px;
      }
			div {
				width: 90%;
			}
			.step_name {
				font-size: 30px;
				margin-bottom: 10px;
			}
			.step_idea {
				color: #999999;
				font-size: 26px;
				line-height: 40px;
			}
		}
	}
}
}
</style>